<template>
    <div class='container'>
        <!-- 主布局：左右两栏 -->
        <div class="main-layout">
            <!-- 左侧：书籍信息 + 听书信息 -->
            <div class="left-column">
                <!-- 书籍信息 -->
                <div v-if="is_read_book" class="info">
                    <t-divider align="left" size="large">📖 书籍信息</t-divider>
                    <div class="book-detail">
                        <t-image class="cover"
                            src="https://piccdn2.umiwi.com/uploader/image/cms_ebook/2025091516/1887559101341333516/091516.jpeg?x-oss-process=image/resize,m_fill,h_320,w_240"
                            alt="书籍封面" fit="cover" />

                        <div class="detail">
                            <div><strong>原书：</strong>长安的荔枝</div>

                            <div><strong>ISBN：</strong>9787506365437</div>
                            <div class="author"><strong>作者：</strong>XXX</div>
                            <div class="summary"><strong>本书总结：</strong>一段简要的书籍内容概述，帮助读者快速了解核心思想。</div>
                            <div><strong>类目：</strong>文学</div>
                        </div>
                    </div>
                    <div><strong>可以干什么：</strong>阅读、听书、做笔记、AI总结</div>
                </div>
                <div v-else class="info">
                    <t-divider align="left">🎧 听书信息</t-divider>
                    <div class="book-detail">
                        <t-image class="cover"
                            src="https://piccdn3.umiwi.com/img/202509/10/202509100730127859664069.jpeg?x-oss-process=image/crop,h_790/resize,w_600,h_790,m_fill"
                            alt="听书封面" fit="cover" />
                        <div class="detail">
                            <div class="author"><strong>解读人：</strong>陈章鱼</div>
                            <div><strong>解读书：</strong>《长安的荔枝》陈章鱼解读</div>
                        </div>
                    </div>
                    <div><strong>可以干什么：</strong>阅读、听书、做笔记、AI总结</div>
                </div>


                <!-- 笔记列表 -->
                <div class="notes">
                    <div class="book-switch">
                        <t-switch v-model="is_read_book" size="medium">
                            <template #label="slotProps">{{ slotProps.value ? '阅读' : '听书' }}</template>
                        </t-switch>
                        <div class="count">
                            <div v-if="is_read_book">
                                读书笔记120条
                            </div>
                            <div v-else>
                                听书笔记10条
                            </div>
                        </div>
                    </div>
                    <t-divider align="left">📝 我的记录</t-divider>
                    <div v-if="is_read_book">
                        <t-radio-group size="small" default-value="1">
                            <t-radio-button value="1">第一章 王的故事</t-radio-button>
                            <t-radio-button value="2">第二章 王的女儿</t-radio-button>
                            <t-radio-button value="3">第三章 王的儿子</t-radio-button>
                            <t-radio-button value="4">第四章 王的女儿的故事</t-radio-button>
                            <t-radio-button value="5">第五章 王的儿子的故事</t-radio-button>
                            <t-radio-button value="6">第六章 王的女儿的故事</t-radio-button>
                            <t-radio-button value="7">第七章 王的儿子的故事</t-radio-button>
                            <t-radio-button value="8">第八章 王的女儿的故事</t-radio-button>
                            <t-radio-button value="9">第九章 王的儿子的故事</t-radio-button>
                            <t-radio-button value="10">第十章 王的女儿的故事</t-radio-button>
                            <t-radio-button value="11">第十一章 王的儿子的故事</t-radio-button>
                        </t-radio-group>

                    </div>
                    <div class="input-section">
                        <t-typography-text theme="success" strong>
                            这是听书的AI总结，火毒书记的章节总结, 这是听书的AI总结，火毒书记的章节总结 这是听书的AI总结，火毒书记的章节总结 这是听书的AI总结，火毒书记的章节总结
                            这是听书的AI总结，火毒书记的章节总结
                        </t-typography-text>
                    </div>
                    <div class="input-section" id="input-section">
                        <t-textarea placeholder="这里创建新笔记：" :autosize="{ minRows: 3, maxRows: 5 }">

                        </t-textarea>

                    </div>


                    <div class="input-section">

                        <t-input placeholder="请输入需要检索的关键词" type="search">

                            <template #prefix-icon>
                                <t-icon name="search" />
                            </template>
                        </t-input>

                    </div>

                    <t-divider align="left">📝 我的笔记</t-divider>
                    <div class="note" v-for="(note, index) in mockNotes" :key="index">
                        <div class="note-title">
                            <div class="title">
                                笔记 {{ index + 1 }}
                            </div>
                            <div class="btn">

                                <t-anchor size="small" :bounds="1" :targetOffset="80" class="anchor">
                                    <t-anchor-item href="#input-section" title="修改">
                                        <!-- <t-button type="primary" size="small">编辑</t-button> -->
                                    </t-anchor-item>
                                </t-anchor>
                                <t-button size="small">删除</t-button>
                                <t-button size="small">喜欢+1</t-button>
                                <t-button size="small">喜欢-1</t-button>
                            </div>
                        </div>
                        <div class="note-content">

                            <t-typography-text :ellipsis="note_ellipsisState" copyable theme="primary">
                                {{ note.content }}
                            </t-typography-text>
                        </div>
                        <div class="note-meta">
                            <div class="item" v-if="is_read_book">
                                第一章 ： 王的女儿-{{ index }}
                            </div>
                            <div class="item" v-else>
                                听书笔记--{{ index }}
                            </div>
                            <div class="item">
                                创建时间：{{ note.date }}
                            </div>
                            <div class="item">
                                创建时间：{{ note.date }}
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- 右侧：AI总结 + 相关资料 -->
            <div class="right-column">
                <!-- AI 总结 -->
                <div class="ai-summary-section">

                    <t-divider align="left">🤖 AI 总结</t-divider>
                    <div class="ai-summary">
                        这是 AI 总结的内容 —— 基于全书核心观点与用户笔记生成的智能摘要。
                    </div>
                </div>


                <!-- 相关资料 -->
                <div class="related-links">
                    <t-divider align="left">🔗 相关资料</t-divider>
                    <div class="link-item baike">百度百科：长安的荔枝</div>
                    <div class="link-item book">京东图书详情页</div>
                    <div class="link-item">得到App 电子书/解读</div>
                    <div class="link-item book">番薯阅读社区讨论</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
const is_read_book = ref(true);
const note_ellipsisState = {
    row: 2,
    expandable: true,
    collapsible: true,
};
// 模拟笔记数据
const mockNotes = ref([
    { date: '2025-09-17', content: '这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容这是笔记一的内容' },
    { date: '2025-09-18', content: '这是笔记二的内容' },
    { date: '2025-09-19', content: '这是笔记三的内容' },
    { date: '2025-09-20', content: '这是笔记四的内容' },
    { date: '2025-09-21', content: '这是笔记五的内容' },
    { date: '2025-09-22', content: '这是笔记六的内容' },
]);


</script>

<style lang='scss' scoped>
.main-layout {
    display: inline-flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.left-column {
    width: 70%;

    .info {
        .book-detail {
            display: inline-flex;

            .cover {
                width: 128px;
                height: 192px;
            }

            .detail {
                margin-left: 10px;
            }
        }

    }

    .notes {
        .book-switch {
            margin: 5px;
            display: flex;
            justify-content: space-between;
        }

        .input-section {
            margin: 10px 0;

            gap: 8px;

            label {
                width: 80px;
                font-weight: 500;
            }
        }

        .note {
            background: #f9f9f9;
            padding: 12px;
            margin: 8px 0;
            border-radius: 6px;
            border-left: 2px solid #007aff;

            .note-title {
                font-weight: 600;
                color: #2c3e50;
                display: flex;
                justify-content: space-between;

                .btn {
                    display: inline-flex;
                    gap: 5px;

                    .anchor {
                        width: 60px;
                    }
                }
            }



            .note-meta {
                justify-content: right;
                display: flex;
                font-size: 0.9rem;
                color: #7f8c8d;
                margin: 2px 0;

                .item {
                    margin: 0 5px 0 5px;
                }
            }
        }


    }
}

.right-column {
    width: 20%;
}



.ai-summary-section .ai-summary,
.related-links .link-item {
    padding: 12px;
    background: #f5f7fa;
    border-radius: 6px;
    margin: 8px 0;
}

.link-item.book {
    background: #e8f4fd;
}

.link-item.baike {
    background: #fff3cd;
}
</style>